<template>
  <div class="personal">
    <Introduce
      :userInfo="$store.state.user.info"
      :artData="artData"
      @getArtData="getArtData"
    />
    <Resume
      v-if="artEventData.length > 0"
      :artEventData="artEventData"
    />
    <RepresenWork
      v-if="artFamousData.length > 0"
      :artFamousData="artFamousData"
    />
    <AboutVideo
      v-if="videoList.length > 0"
      @artVideo="artVideo"
      :videoTotal="videoTotal"
      :videoList="videoList"
    />
    <ArtWorkRecomm />
    <EssayList v-if="$ua.isFromPc()" />
  </div>
</template>

<script>
import Introduce from './component/introduce/index.vue';
import Resume from './component/resume/index.vue';
import RepresenWork from './component/represenWork'
import AboutVideo from './component/aboutVideo/index.vue';
import ArtWorkRecomm from './component/artWorkRecomm';
import EssayList from './component/essayList';
import { getVideoUrl } from '@/utils/downloadFile'
export default {
  scrollToTop: true,
  // middleware: 'identityInfo',
  components: {
    Introduce,
    Resume,
    RepresenWork,
    AboutVideo,
    ArtWorkRecomm,
    EssayList
  },
  data() {
    return {
      artData: {},
      artEventData: [],
      artFamousData: [],
      videoList: [],
      video_page_num: 1,
      video_page_count: 2
    }
  },
  mounted() {
    if (this.$store.state.user.info?.userInfo?.user_type !== 2 && this.$store.state.user.info?.userInfo?.user_type !== 3 && this.$store.state.user.info?.userInfo?.art_info.data_id == new URL(location.href).searchParams.get('id') && this.$store.state.user.info?.userInfo?.data_id === this.$route.query.id) {
      this.$router.push('/applyArtist')
      this.$message.warning('您当前还不是艺术家')
      this.$store.commit("router/setActiveRoute", { activeRouter: '/applyArtist' });
    }
    if (this.$route.query.id || this.$store.state.user.info?.user_info?.art_info.data_id) {
      this.getArtData()
      this.artEvent()
      this.artFamous()
      this.artVideo()
    }
  },
  methods: {
    getVideoUrl,
    // 获取艺术家个人信息
    getArtData() {
      const params = {
        data_id: this.$route.query.id || this.$store.state.user.info?.user_info?.art_info.data_id
      }
      console.log('params.data_id', params.data_id)
      this.$api.artDesc(params).then(res => {
        console.log('大事记列表', res)
        this.artData = res.result
        // this.artEventData = Array.isArray(res.result?.big_event) ? res.result?.big_event : []
      })
    },
    // 大事记
    artEvent() {
      this.$api.artEvent({ art_id: this.$route.query.id }).then(res => {
        if (res.status == '$SUCCESS') {
          this.artEventData = Array.isArray(res.result.item_list) ? res.result.item_list : []
        }
      })
    },
    // 代表作
    artFamous() {
      this.$api.artFamous({ art_id: this.$route.query.id }).then(res => {
        this.artFamousData = Array.isArray(res.result.item_list) ? res.result.item_list.filter(item => item.thumbnail).slice(0, 3) : []
        console.log('代表作', this.artFamousData)
      })
    },
    // 活动视频
    artVideo() {
      if (this.$ua.isFromPc()) {
        this.$set(this, 'videoList', [])
        this.$api.getArtVideoList({ art_id: this.$route.query.id }).then(res => {
          const artVideoList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          artVideoList.forEach(item => {
            this.videoList.push(item.video_path)
          })
          this.videoTotal = res.result.total_count
          console.log('this.videoList', this.videoList)
        })
      } else {
        this.page_num++
        this.$api.getArtVideoList({
          art_id: this.$route.query.id,
          page_num: this.video_page_num,
          page_count: this.video_page_count
        }).then(res => {
          const artVideoList = Array.isArray(res.result.item_list) ? res.result.item_list : []
          artVideoList.forEach(item => {
            item.video_url = item.video_path
            this.videoList.push(item)
          })
          console.log('this.videoList', this.videoList)
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
// .personal {}
</style>